<template>
	<div v-if="systemAreaType">
		<a-modal
			:visible="visible"
			:mask-closable="false"
			:footer="null"
			:title="
				systemAreaType
					? systemAreaType.type_name +
					  ' [ ' +
					  systemAreaType.type_abbreviation +
					  ' ]'
					: undefined
			"
			:z-index="999"
			:width="700"
			@cancel="onClose"
		>
			<a-alert
				type="warning"
				:style="{ marginTop: '-10px', marginBottom: '10px' }"
			>
				<template slot="description">
					点击树形标题进行编辑或排序<br />
					修改名称只影响后续产生的数据， 历史数据不更新<br />
					<span style="color: blue">数据调整后，需重新登录后生效</span>
				</template>
			</a-alert>

			<div>
				顶层子集操作:
				<a-button-group>
					<a-button
						@click="
							systemAreaEdit({
								parent_area_code: '',
								parent_area_name: '顶级',
								status: 1,
							})
						"
					>
						添加
					</a-button>
					<a-button
						@click="
							systemAreaSortArr = systemAreaTypeTreeData
							systemAreaSortVisible = true
						"
					>
						排序
					</a-button>
				</a-button-group>
			</div>

			<a-tree
				:tree-data="systemAreaTypeTreeData"
				show-icon
				show-line
				default-expand-all
				:replace-fields="{
					title: 'area_name',
					key: 'area_code',
				}"
			>
				<span
					slot="title"
					slot-scope="item"
					:style="
						item.status != 1
							? {
									color: '#999',
							  }
							: {}
					"
					style="position: relative"
					@mouseenter="handleMouseEnter($event)"
					@mouseleave="handleMouseLeave($event)"
				>
					<app-show :data="item" />
					<span class="hide_action">
						<template
							v-if="
								systemAreaType.data_type == 0 && systemAreaType.type_class == 0
							"
						>
							<a-tooltip v-if="item.children && item.children.length > 0">
								<template slot="title"> 子集排序 </template>
								<a-icon
									class="action"
									type="sort-ascending"
									@click="
										systemAreaSortArr = item.children
										systemAreaSortVisible = true
									"
								/>
							</a-tooltip>

							<a-tooltip>
								<template slot="title"> 添加子集 </template>
								<a-icon
									class="action"
									type="plus-circle"
									@click="
										systemAreaEdit({
											parent_area_code: item.area_code,
											parent_area_name: item.area_name,
										})
									"
								/>
							</a-tooltip>
						</template>

						<a-tooltip>
							<template slot="title"> 修改子集 </template>
							<a-icon
								class="action"
								type="edit"
								@click="
									systemAreaEdit({
										...item,
									})
								"
							/>
						</a-tooltip>

						<a-popconfirm
							title="是否删除该纪录?"
							ok-text="确定"
							cancel-text="取消"
							@confirm="systemAreaDelete(item)"
						>
							<a-tooltip>
								<template slot="title"> 删除子集 </template>
								<a-icon class="action" type="delete" />
							</a-tooltip>
						</a-popconfirm>
					</span>
				</span>
			</a-tree>
		</a-modal>

		<app-sort
			v-model="systemAreaSortVisible"
			:data="systemAreaSortArr"
			@change="systemAreaSort"
		/>

		<edit
			v-model="systemAreaVisible"
			:item="systemArea"
			@change="systemAreaQuery"
		/>
	</div>
</template>

<script>
	import systemAreaType from "@/api/systemAreaType"
	import systemArea from "@/api/systemArea"
	export default {
		components: {
			edit: () => import("./edit"),
		},
		model: {
			//event:什么时候触发v-model行为
			event: "change-visible",
			// 定义传递给v-model的那个变量，绑定到哪个属性值上
			prop: "visible",
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			id: {
				type: [Number, String],
				default: () => {
					return undefined
				},
			},
			item: {
				type: Object,
				default: () => {
					return {
						id: 0,
					}
				},
			},
		},
		data() {
			return {
				buttonCol: { span: 18, offset: 4 },
				labelCol: { span: 4 },
				wrapperCol: { span: 18 },
				confirmLoading: false,

				systemAreaType: {
					...this.item,
				},
				systemAreaTypeTreeData: [],

				systemAreaSortVisible: false,
				systemAreaSortArr: [],

				//分类子集管理
				systemAreaVisible: false,
				systemArea: undefined,
			}
		},
		watch: {
			visible: function (showFlag) {
				if (!showFlag) return
				this.systemAreaType = {
					...this.item,
				}
				if (!this.systemAreaType.id || this.systemAreaType.id <= 0) {
					systemAreaType.select(this.id).then((response) => {
						if (response.code !== 1) {
							return
						}
						if (response.data) {
							this.systemAreaType = response.data
							this.systemAreaQuery()
						}
						return
					})
					return
				}
				this.systemAreaQuery()
			},
		},
		created() {},
		mounted() {},
		methods: {
			onClose() {
				this.$emit("change-visible", false)
			},
			systemAreaQuery() {
				this.systemAreaTypeTreeData = []
				systemAreaType.children(this.systemAreaType.id).then((response) => {
					console.log(response)
					if (response.code !== 1) {
						this.$message.warning(response.message)
						return
					}
					if (response.data) {
						this.systemAreaTypeTreeData = response.data
					}
				})
			},
			systemAreaEdit(params) {
				this.systemArea = {
					...params,
					data_type: this.systemAreaType.data_type,
					area_type_name: this.systemAreaType.type_name,
					data_value_type: this.systemAreaType.data_value_type,
					area_type: this.systemAreaType.id,
				}
				this.systemAreaVisible = true
			},
			systemAreaDelete(item) {
				systemArea.delete(item.id).then((response) => {
					if (response.code !== 1) {
						this.$message.error(response.message)
						return
					}
					this.$message.success(response.message)
					this.systemAreaQuery()
					return
				})
				return
			},
			systemAreaSort(items) {
				var updataMap = {}
				for (var index in items) {
					updataMap[items[index].id] = items.length - index
				}
				systemArea.sort(updataMap).then((response) => {
					if (response.code !== 1) {
						this.$message.error(response.message)
						return
					}
					this.$message.success(response.message)
					this.systemAreaQuery()
					return
				})
			},

			handleMouseEnter(e) {
				e.target.querySelector(".hide_action").style.display = "inline-block"
			},
			handleMouseLeave(e) {
				e.target.querySelector(".hide_action").style.display = "none"
			},
		},
	}
</script>

<style lang="less" type="text/less" scoped>
	.ant-form-item {
		margin-bottom: 6px;
	}

	.changeGhost li {
		list-style: none;
		padding: 6px;
	}
	.changeGhost li:nth-child(2n-1) {
		background: #f8f8f8;
	}
	.ghost {
		opacity: 0.5;
		background: #c8ebfb !important;
	}
	.changeDiv {
		cursor: pointer;
	}
	.hide_action {
		display: none;
		padding-left: 10px;
		.action {
			padding-left: 4px;
		}
	}
</style>
